<template>
	<view>
		<u-form-item  @click="open" :class="`z-form-item ${disabled ? 'disabled' : ''}`" :label="label" :label-width="labelWidth" :prop="prop" :required="required"
			:borderBottom="true">
			<u-input v-model="value" :disabled="disabled" :readonly="true" border="none" ></u-input>
			<u-icon slot="right" name="arrow-right" ></u-icon>
		</u-form-item>
		<u-picker v-if="!keyName" ref="picker" :show="showPicker" :columns="columns" @confirm="confirm" @cancel="cancel"></u-picker>
		<u-picker v-if="keyName" ref="picker" :show="showPicker" :columns="columns" :keyName="keyName" @confirm="confirm" @cancel="cancel"></u-picker>
	</view>
</template>

<script>
	export default {
		props: ['value', 'label', 'prop', 'required', 'disabled', 'labelWidth', 'showPicker', 'list', 'keyName'],
		data() {
			return {
				columns: [
					[]
				]
			}
		},
		methods: {
			open() {
				this.$emit('open')
			},
			cancel() {
				this.$emit('cancel')
			},
			confirm(val) {
				// 与 z-input 组件不同的是，这里只接受父组件 value 的传值，并不直接通过 input 绑定修改
				// 而是通过 picker 的 confirm 事件修改 value 值
				this.$emit('confirm', val.value[0])
			}
		},
		mounted() {
			this.$refs.picker.setColumnValues(0, this.list)
		}
	}
</script>

<style lang="scss" scoped>
</style>